<%--
  Created by IntelliJ IDEA.
  User: 86130
  Date: 2021/4/6
  Time: 17:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>加减乘除运算</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/boot/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/boot/js/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/boot/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.min.js" integrity="sha512-RGbSeD/jDcZBWNsI1VCvdjcDULuSfWTtIva2ek5FtteXeSjLfXac4kqkDRHVGf1TwsXCAqPTF7/EYITD0/CTqw==" crossorigin="anonymous"></script>
</head>
<body style="background-color: #e8f6f6">
<div class="row col-sm-offset-2 col-sm-8">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>题目号</th>
            <th>题目</th>
            <th>答案(小数四舍五入保留一位)</th>
        </tr>
        </thead>
        <tbody id="AScontent">
        </tbody>
    </table>
    <div align="center">
        <button type="button" class="btn btn-primary" id="ASbtn">查看题目</button>
        <button type="button" class="btn btn-primary" id="Commitbtn"  style="display: none">提交题目</button>
    </div>
</div>
<script>
    window.onload=function () {
        $('#ASbtn').click(function () {
            $('#ASbtn').hide();
            $('#Commitbtn').show();
            $.post({
                    url:"${pageContext.request.contextPath}/question/asmdQuestion",
                    dataType:'json',
                    data:undefined,
                    success:function (data) {
                        let right=0;
                        var html="";
                        for (let i = 0; i < data.length; i++) {
                            var id='ASanswer'+i;
                            console.log(id);
                            html=html+"<tr>"+
                                "<td>"+data[i].id+"</td>"+
                                "<td>"+data[i].content+"= </td>"+
                                "<td>"+"<input type='text' id='"+id+"'>"+"</td>"
                                +"</tr>"
                        }
                        $('#AScontent').html(html);
                        $('#Commitbtn').click(function () { //启动提交按钮的监听,如果提交题目检查它的正确性,然后显示出来
                            for (let i = 0; i < data.length; i++) {
                                //获取输入框中的答案
                                let ASinput = document.getElementById("ASanswer"+i);
                                let userAnswer = ASinput.value;
                                if(userAnswer==data[i].result){
                                    right++;
                                    ASinput.style.backgroundColor='#66a9d9';
                                }else{   //题目出错
                                    userAnswer=userAnswer+"   正确答案是:"+data[i].result;
                                    ASinput.style.backgroundColor='#f61717';
                                    ASinput.value=userAnswer;
                                }
                            }
                            alert("您做的题目总数为50,正确的数目为"+right+"错误的数目为"+(50-right)+"正确率为"+(2*right)+"%");
                            right=0;
                        })
                    }
                }
            )
        })
    }
</script>
</body>
</html>
